<template>
  <div class="about">
    <div class="tab">
      <!-- 卡片视图区域 -->
      <el-card>
        <!-- 搜索与添加区域 -->
        <el-row>
          <el-col :span="5">
            <el-input
              size="small"
              v-model="searchName"
              placeholder="请输入会员号"
            >
              <el-button
                slot="append"
                @click="searchByName()"
                icon="el-icon-search"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="3">
            <el-button
              size="small"
              icon="el-icon-circle-plus-outline"
              type="primary"
              @click="dialogFormVisible = true"
              >添加会员</el-button
            >
          </el-col>
        </el-row>
      </el-card>
      <el-table :data="paginationList" border>
        <el-table-column
          type="index"
          align="center"
          prop="id"
          width="101"
        ></el-table-column>
        <el-table-column
          prop="member_phone"
          align="center"
          label="会员号"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="balance"
          align="center"
          label="总余额"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="consume"
          align="center"
          label="总消费金额"
          width="200"
        ></el-table-column>
        <el-table-column
          label="状态"
          width="170"
          align="center"
          prop="member_state"
        >
          <template slot-scope="scope">
            <el-switch
              v-if="isShopowner != 'false'"
              @change="openDel(scope.row)"
              v-model="scope.row.switchState"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :inactive-text="scope.row.member_state"
            >
            </el-switch>
            <el-switch
              v-else
              disabled
              @change="openDel(scope.row)"
              v-model="scope.row.switchState"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :inactive-text="scope.row.member_state"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="operate" align="center" width="310" label="操作">
          <template slot-scope="scope">
            <!-- 编辑 -->
            <el-button
              type="text"
              @click="openDialogFormUpdate(scope.row)"
              icon="el-icon-edit"
              size="mini"
              >编辑</el-button
            >
            <!-- 充值 -->
            <el-button
              type="text"
              @click="openDialogFormRenew(scope.row)"
              icon="el-icon-plus"
              size="mini"
              >充值</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="paginationBlock" style="margin-top: 15px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[7, 15, 20, 25]"
          :page-size="pageSize"
          layout="total,sizes, prev, pager, next,jumper"
          :total="memberTableList.length"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 添加会员模态框 -->
    <el-dialog title="添加会员" :visible.sync="dialogFormVisible" width="35%">
      <!-- 对话框主体区域 -->
      <el-form
        :model="addMemberObj"
        :rules="addMemberRules"
        ref="addMemberFormRef"
        label-width="100px"
      >
        <el-form-item label="手机号:" prop="member_phone">
          <el-input
            v-model="addMemberObj.member_phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="充值金额:" prop="balance">
          <el-input
            v-model="addMemberObj.balance"
            placeholder="请输入充值金额"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态:">
          <el-input value="可用" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="ai_dialog_close()">取 消</el-button>
        <el-button type="primary" @click="addMemberInfo()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改会员模态框 -->
    <el-dialog title="修改会员" :visible.sync="dialogFormUpdate" width="35%">
      <!-- 对话框主体区域 -->
      <el-form
        :model="updateMemberObj"
        :rules="addMemberRules"
        ref="addMemberFormRef"
        label-width="100px"
      >
        <el-form-item label="手机号:" prop="member_phone">
          <el-input
            v-model="updateMemberObj.member_phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="充值金额:" prop="balance">
          <el-input
            v-model="updateMemberObj.balance"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="消费金额:" prop="balance">
          <el-input
            v-model="updateMemberObj.consume"
            :disabled="true"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="update_dialog_close()">取 消</el-button>
        <el-button type="primary" @click="updateBilliardInfo()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 续费模态框 -->
    <el-dialog title="续费" :visible.sync="dialogFormRenew" width="35%">
      <!-- 对话框主体区域 -->
      <el-form :model="renewMemberObj" label-width="100px">
        <el-form-item label="会员号:">
          <el-input
            v-model="renewMemberObj.member_phone"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="总金额:">
          <el-input
            v-model="renewMemberObj.balance"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择充值金额:">
          <el-radio v-model="radio" label="1" @change="handleRadioChange"
            >自动</el-radio
          >
          <el-radio v-model="radio" label="2" @change="handleRadioChange"
            >自定义</el-radio
          >
        </el-form-item>
        <el-form-item>
          <el-radio-group v-show="radio === '1'" v-model="renew" size="medium">
            <el-radio-button label="10"></el-radio-button>
            <el-radio-button label="30"></el-radio-button>
            <el-radio-button label="50"></el-radio-button>
            <el-radio-button label="100"></el-radio-button>
          </el-radio-group>
          <el-input
            v-show="radio === '2'"
            v-model="renew"
            placeholder="请输入自定义值"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="renew_dialog_close()">取 消</el-button>
        <el-button type="primary" @click="renewBilliardInfo()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      typetValue: "所有",
      stateValue: "所有",
      stateOptions: ["可用", "禁用"],
      switchState: null, //开关
      renew: "", //续费
      radio: "1",
      searchName: "", //搜索的名字
      memberTableList: [], //台球桌集合
      paginationList: [], //分页后的数据
      currentPage: 1, //当前页码
      pageSize: 7, //每页的数据条数
      dialogFormVisible: false, //添加
      dialogFormUpdate: false, //修改
      dialogFormRenew: false, //续费
      addMemberObj: {
        member_phone: "",
        balance: "",
        consume: 0,
        member_state: "",
      },
      updateMemberObj: {
        member_id: "",
        member_phone: "",
        balance: "",
        consume: 0,
        member_state: "",
      },
      renewMemberObj: {
        member_id: "",
        member_phone: "",
        balance: "",
      },
      addMemberRules: {
        member_phone: [
          { required: true, message: "请输入您的电话号码", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              if (/^1[345789]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        balance: [
          { required: true, message: "请输入价格", trigger: ["blur"] },
          { validator: this.checkPrice, trigger: ["blur"] },
        ],
      },
      isShopowner: true,
    };
  },
  methods: {
    // 获取全部数据
    getlivestockInfo() {
      let that = this;
      that.$axios
        .get("/getMemberAll") //补上后台接口即可
        .then((res) => {
          // 请求成功
          that.memberTableList = res.data;
          // 获取页面数据后立马调用下面函数
          that.getPageData();
          return;
        })
        .catch((error) => {
          // 请求失败
          console.log("请求失败");
          console.log(error);
        });
    },
    // 搜索
    searchByName() {
      if (this.searchName === "") {
        this.getlivestockInfo();
      } else {
        this.$axios
          .get(
            `/searchMemberByPhone?member_phone=${encodeURIComponent(
              this.searchName
            )}`
          ) //通过URL传参
          .then((res) => {
            //请求成功
            this.memberTableList = [res.data];
            console.log(this.memberTableList);
            //刷新分页
            this.getPageData();
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    // 添加台球信息
    addMemberInfo() {
      this.$refs.addMemberFormRef.validate(async (valid) => {
        if (!valid) return this.$message.error("请正确填写添加会员信息");
        console.log(this.addMemberObj);
        await this.$axios
          .post("/addMember", this.addMemberObj)
          .then((res) => {
            this.$message.success({
              type: "success",
              message: res.data,
            });
            this.getlivestockInfo();
            this.ai_dialog_close();
          })
          .catch((error) => {
            console.log(error);
          });
      });
    },
    //修改
    updateBilliardInfo() {
      this.$refs.addMemberFormRef.validate(async (valid) => {
        if (!valid) return this.$message.error("请正确填写修改台球信息");
        await this.$axios
          .post("/updateMember", this.updateMemberObj)
          .then((res) => {
            this.$message.success({
              type: "success",
              message: res.data,
            });
            this.getlivestockInfo();
            this.update_dialog_close();
          })
          .catch((error) => {
            console.log(error);
          });
      });
    },
    //续费
    renewBilliardInfo() {
      if (this.renew === "") {
        return;
      }
      this.$axios
        .get(
          `/renew?renews=${this.renew}&member_id=${this.renewMemberObj.member_id}`
        )
        .then((res) => {
          this.$message.success({
            type: "success",
            message: res.data,
          });
          this.getlivestockInfo();
          this.renew_dialog_close();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //拉黑
    openDel(row) {
      console.log(row);
      let title;
      let member_state;
      if (row.switchState) {
        member_state = "可用";
        title = "此操作将启用该会员, 是否继续?";
      } else {
        member_state = "禁用";
        title = "此操作将禁用该会员, 是否继续?";
      }
      console.log(member_state);
      let that = this;
      this.$confirm(title, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          that.$axios
            .get(
              `/delMember?member_id=${row.member_id}&member_state=${member_state}`
            )
            .then((res) => {
              // 请求成功
              this.getlivestockInfo();
              this.$message({
                type: "success",
                message: res.data,
              });
            })
            .catch((error) => {
              // 请求失败
              console.log("请求失败");
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消拉黑",
          });
        });
    },
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val;
      this.getPageData();
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getPageData();
    },
    // 获取分页之后的数据
    getPageData() {
      let start = (this.currentPage - 1) * this.pageSize;
      let end = start + this.pageSize;
      this.paginationList = this.memberTableList.slice(start, end);
      this.created();
    },
    // 清空修改添加模态框
    clearAddDilog() {
      this.addMemberObj.member_phone = "";
      this.addMemberObj.balance = "";
    },
    // 关闭修改添加模态窗
    ai_dialog_close() {
      this.clearAddDilog();
      this.dialogFormVisible = false;
      this.$refs["addMemberFormRef"].clearValidate();
    },
    // 打开修改模态框
    openDialogFormUpdate(row) {
      this.dialogFormUpdate = true;
      this.updateMemberObj.member_id = row.member_id;
      this.updateMemberObj.member_phone = row.member_phone;
      this.updateMemberObj.balance = row.balance;
      this.updateMemberObj.consume = row.consume;
      this.updateMemberObj.member_state = row.member_state;
    },
    //关闭修改模态框
    update_dialog_close() {
      this.clearUpdateDilog();
      this.dialogFormUpdate = false;
      // this.$refs.updateUserRules.clearValidate();
      this.$refs["addMemberFormRef"].clearValidate();
    },
    // 清空修改模态框
    clearUpdateDilog() {
      this.updateMemberObj.member_phone = "";
      this.updateMemberObj.balance = "";
      this.updateMemberObj.consume = "";
      this.updateMemberObj.member_state = "";
    },
    // 打开续费模态框
    openDialogFormRenew(row) {
      this.dialogFormRenew = true;
      this.renewMemberObj.member_id = row.member_id;
      this.renewMemberObj.member_phone = row.member_phone;
      this.renewMemberObj.balance = row.balance;
    },
    //关闭续费模态框
    renew_dialog_close() {
      this.clearRenewDilog();
      this.dialogFormRenew = false;
    },
    // 清空续费模态框
    clearRenewDilog() {
      this.renewMemberObj.member_id = "";
      this.renewMemberObj.member_phone = "";
      this.renewMemberObj.balance = "";
      this.renew = "";
    },
    //自定义验证
    checkPrice(rule, value, callback) {
      if (value === "" || value <= 0) {
        callback(new Error("价格必须大于0"));
      } else {
        callback();
      }
    },
    //判断是可用还是禁用
    created() {
      this.paginationList.forEach((row) => {
        row.switchState = row.member_state === "可用";
      });
    },
    //续费选择清空
    handleRadioChange() {
      this.renew = "";
    },
  },
  mounted() {
    this.isShopowner = localStorage.getItem("isShopowner");
    this.getlivestockInfo();
  },
};
</script>
<style scope>
.paginationBlock {
  margin-left: 90px;
}

.el-card .el-col {
  margin-right: 8px;
}

.allocationRoleDialog .el-dialog__body {
  padding: 15px 35px;
}
</style>
